<template>
  <div class="productInfo-box">
    <el-form ref="ruleFormRef" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="商品分类：" prop="productCategoryId">
        <el-cascader
          class="m-r-15"
          v-model="form.productCategoryId"
          :props="customProps"
          :options="option1"
          placeholder="请选择"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item label="商品名称：" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="副标题：" prop="subTitle">
        <el-input v-model="form.subTitle" />
      </el-form-item>
      <el-form-item label="商品品牌：" prop="brandName">
        <el-select v-model="form.brandName" placeholder="请选择品牌">
          <el-option
            v-for="item in option2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品介绍：" prop="description">
        <el-input
          v-model="form.description"
          :rows="2"
          type="textarea"
          placeholder="请输入内容"
        />
      </el-form-item>

      <el-form-item label="商品货号：" prop="productSn">
        <el-input v-model="form.productSn" />
      </el-form-item>
      <el-form-item label="商品售价：" prop="price">
        <el-input v-model="form.price" />
      </el-form-item>
      <el-form-item label="市场价：" prop="originalPrice">
        <el-input v-model="form.originalPrice" />
      </el-form-item>
      <el-form-item label="商品库存：" prop="stock">
        <el-input v-model="form.stock" />
      </el-form-item>
      <el-form-item label="计量单位：" prop="unit">
        <el-input v-model="form.unit" />
      </el-form-item>
      <el-form-item class="weight" label="商品重量：" prop="weight">
        <el-input v-model="form.weight" />
        <span style="margin-left: 20px">克</span>
      </el-form-item>
      <el-form-item label="排序：" prop="sort">
        <el-input v-model="form.sort" />
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          下一步，填写商品促销
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, inject } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import {
  getProductCategoryWithChildrenListApi,
  BrandListApi,
} from "../api/api";

const active = inject<any>("active");
const all = inject<any>("all");
BrandListApi({ pageNum: 1, pageSize: 100 }).then((res) => {
  if (res.code == 200) {
    option2.value = res.data.list.map((item: { id: any; name: any }) => ({
      value: item.id,
      label: item.name,
    }));
  }
});

// 获取商品分类
getProductCategoryWithChildrenListApi().then((res) => {
  if (res.code === 200) {
    option1.value = res.data;
  }
});
const option1 = ref<IProductCategory[]>([]); // 商品分类数据
const customProps = {
  emitPath: false, // 只返回该节点的值
  value: "id", // 自定义当前数组的键名 - value
  label: "name", // 自定义当前数组的键名 - label
  children: "children", // 自定义当前数组的键名 - children
  expandTrigger: "click", // 次级菜单的展开方式 - click/hover
};

const option2 = ref<any>([]); // 商品品牌数据

const handleChange = (val: null) => {
  form.productCategoryId = val;
  option1.value.forEach((item: IProductCategory) => {
    item.children.forEach((items: IProductCategoryChild) => {
      if (items.id === val) form.productCategoryName = items.name;
    });
  });
};

const ruleFormRef = ref<FormInstance>();
const form = reactive({
  // productCategory: [], // 当前商品分类数据
  productCategoryId: null, //id
  productCategoryName: "",
  name: "", // 商品名称
  subTitle: "", // 副标题
  brandName: "", // 商品品牌
  description: "", // 商品内容
  productSn: "", //商品货号
  price: 0, // 商品售价
  originalPrice: 0, // 市场价
  stock: 0, // 商品库存
  unit: "", // 计量单位
  weight: 0, // 商品重量
  sort: 0, // 排序
});
const rules = reactive<FormRules>({
  productCategoryId: [
    { required: true, message: "请选择商品分类", trigger: "blur" },
  ],
  name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
  subTitle: [{ required: true, message: "请输入商品标题", trigger: "blur" }],
  brandName: [{ required: true, message: "请输入商品品牌", trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      active.value = 1;
      console.log(all);
      Object.assign(all, form);
      console.log(all);
    } else {
      ElMessage.error("验证失败");
    }
  });
};
</script>

<style lang="less" scoped>
.productInfo-box {
  padding: 20px;
  margin-right: 80px;
  .weight {
    :deep(.el-input) {
      width: 300px;
    }
  }
  .btn {
    :deep(.el-form-item__content) {
      justify-content: center;
    }
  }
}
</style>
